<template>
    <q-toolbar class="min-h-[40px] flex-center q-gutter-x-sm">
        <slot />
        <template v-if="list">
            <q-btn push text-color="primary" label="新增" icon="add" @click="详情.初始化()" />
            <template v-if="路由.a.当前页类型=='列表'">
                <q-btn push text-color="negative" label="删除" icon="delete" @click="list.删()"
                    :disabled="!list.a.选中组.length" />
            </template>
            <q-input outlined dense v-model="list.req.多字段搜索关键词" placeholder="关键词……" debounce="800" clearable>
                <template v-slot:append>
                    <q-icon name="search" />
                </template>
            </q-input>
            <q-btn-dropdown push label="筛选" icon="filter_alt">
                <q-list class="min-w-80 q-pa-sm">
                    <q-toolbar class="min-h-[40px] flex-center q-gutter-x-sm">
                        <q-btn dense text-color="primary" label="新增" icon="add" @click="list.增筛选()" />
                        <q-btn dense text-color="primary" label="应用" icon="done" @click="list.提交筛选()" />
                        <q-btn dense text-color="negative" label="清除" icon="clear" @click="list.删筛选()" />
                    </q-toolbar>
                    <q-separator spaced />
                    <q-item clickable v-for="(筛选) in list.a.筛选组">
                        <q-item-section>
                            <q-select outlined dense v-model="筛选.字段名" :options="list.筛选设置.字段名" label="字段名" />
                        </q-item-section>
                        <q-item-section>
                            <q-select outlined dense v-model="筛选.比较运算符" :options="list.筛选设置.比较运算符" label="比较符号" />
                        </q-item-section>
                        <q-item-section>
                            <q-input outlined dense v-model="筛选.字段值" placeholder="关键词……">
                            </q-input>
                        </q-item-section>
                    </q-item>
                </q-list>
            </q-btn-dropdown>
            <q-btn push text-color="primary" :label="路由.a.待切换视图" icon="content_paste" @click="list.视图切换()" />
        </template>
        <template v-if="详情_抽屉式 && !list">
            <q-btn push text-color="primary" label="提交" icon="check" @click="详情_抽屉式.提交" v-if="详情_抽屉式.a.变化了">
                <q-badge color="orange" floating v-if="详情_抽屉式.a.变化了">变</q-badge>
            </q-btn>
            <q-btn push label="关闭" icon="close" @click="详情_抽屉式.关窗" />
        </template>
        
        <template v-if="详情">
            <q-btn push text-color="primary" label="提交" icon="check" @click="详情.提交" v-if="详情.a.变化了">
                <q-badge color="orange" floating v-if="详情.a.变化了">变</q-badge>
            </q-btn>
            <q-btn push text-color="primary" label="复制" icon="file_copy" @click="详情.复制" />

            <q-btn push text-color="negative" label="删除" icon="delete" @click="详情.删" v-if="详情.单项.id" />
        </template>
        <template v-if="设置">
            <q-btn push text-color="primary" label="新增" icon="add" @click="设置.增" />
            <q-btn push text-color="primary" label="提交" @click="设置.提交" v-if="设置.a.变化了">
                <q-badge color="orange" floating v-if="设置.a.变化了">变</q-badge>
            </q-btn>
        </template>
        <slot name="尾部" />
    </q-toolbar>
</template>

<script setup>
import use路由 from '@/amtf/hooks/use路由';
const 路由 = use路由();

const props = defineProps({
    // 可选属性: { type: Array, default: [] }
    详情: Object,
    详情_抽屉式: Object,
    设置: Object,
    list: Object,
})
</script>

<style lang="scss" scoped></style>